<template>
  <div class="scroll-click">
    <div class="left">
      <div class="left-title" :class="{ active: actived === item.title+ 'left' }" v-for="(item, index) in menu" :key="index" :ref="item.title + 'left'" @click="changeTitle(item.title + 'right')">
        <div >{{ item.title }}</div>
      </div>
    </div>
    <div class="right" ref="scrollContainer">
      <div
        class="right-title"
        :class="{ active: actived === item.title+ 'right' }"
        v-for="(item, index) in data"
        :key="index"
        :ref="item.title + 'right'"
        @click="changeTitle(item.title + 'left')"
      >
        {{ item.title }}
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu:[
        {
          title: "标题1",
          content: "西安1",
        },
        {
          title: "标题2",
          content: "西安2",
        },
        {
          title: "标题3",
          content: "西安3",
        }
      ],
      data: [
        {
          title: "标题1",
          content: "西安1",
        },
        {
          title: "标题2",
          content: "西安2",
        },
        {
          title: "标题3",
          content: "西安3",
        },
      ],
      actived: null,
    };
  },
  methods: {
    changeTitle(title) {
      const val = this.$refs[title][0];
      val.scrollIntoView({ behavior: "smooth", block: "start" });
      this.actived = title;
    },
  },
};
</script>

<style lang="scss">
.scroll-click {
  display: flex;
  .left {
    height: 200px;
    overflow-y: auto;
    &-title {
      height: 100px;
      line-height: 38px;
      width: 100px;
      text-align: center;
      background: #eee;
      margin: 10px;
      cursor: pointer;
    }
    .active {
      background: #992b2b;
    }
  }
  .right {
    height: 200px;
    overflow-y: auto;
    .right-title {
      height: 100px;
      cursor: pointer;
      background: #ddd;
      margin: 10px;
    }
    .active {
      background: #992b2b;
    }
  }
}
</style>
